<!--
 * @Author: your name
 * @Date: 2021-11-27 10:44:40
 * @LastEditTime: 2021-11-28 09:16:08
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \xxtx-client-ui\src\views\News.vue
-->

<template>
  
  <div class="header k clearfix">
    <!--log-->
    <div class="logo">
      <a href="../../index.htm" title="新闻网">
        <img
          src="../assets/logo.png"
          width="415"
          height="71"
          border="0"
          alt="新闻网"
          title="新闻网"
          top=1000px;
        />
      </a>
        <div class="top_r">
      <img src="../assets/xx.png" alt /> 
        </div>
    </div>
    <!--导航-->
  <div class="navBar clearfix">
        <div class="big_nav_bg_l"></div> 
        <div class="big_nav_bg_r"></div>
        <div class="nav_bg clearfix">
            <div class="nav_bg_l">
                <div class="nav_bg_r">
                    <ul class="nav k clearfix">                
                    <li id="m1" class="m ">
                        <h3>首页</h3>
                    </li>
                    <li id="m2" class="m on">
                        <h3>头条新闻</h3>
                    </li>
                    <li id="m3" class="m ">
                        <h3>综合新闻</h3>
                    </li>
                    <li id="m4" class="m ">
                        <h3>媒体聚焦</h3>
                    </li>
                    <li id="m5" class="m ">
                        <h3>怀院人物</h3>
                    </li>
                    <li id="m6" class="m ">
                        <h3>发展论坛</h3>
                    </li>
                    <li id="m7" class="m ">
                        <h3>电子校报</h3>
                    </li>
                    <li id="m8" class="m ">
                        <h3>空中广播</h3>
                    </li>
                    <li id="m9" class="m ">
                        <h3>官方微信</h3>
                    </li>
                    <li id="m10" class="m ">
                        <h3>视频校园</h3>
                    </li>
                    <li id="m11" class="m ">
                        <h3>精彩专题</h3>
                    </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="smallt">
            <li>
                <h3>拿奖拿到手软！我校学子在第七届“东方财富杯”全国大学生金融精英挑战赛获奖40项</h3>
            </li>
        </div>
        <div class="content" v-for="item in article" :key="item.id">
            <div v-html="item.content"></div>
        </div>
    </div>
    <!--底部-->
    <div>
        <img src="../assets/di.png" class="bottom">
    </div>
</div>
</template>


<script>
// 导入请求工具
import { get } from "@/utils/request.js";
export default {
  data() {
    return {
      article:[]
    };
  },
  methods: {
    // 查询所有栏目信息
    findAllCategories() {
        
      // 使用axios封装的get方法，发送ajax请求，拿到所有的栏目数据
      get("/index/article/pageQuery", { page: 1, pageSize: 100, categoryId:9 }).then((res) => {
        // 将后台接口响应的数据，设置到组件的数据模型中
        this.article = res.data.list;
      });
    },
   
  },
  // vue组件的生命周期钩子函数
  created() {
   
  },
  mounted(){
      console.log("-----")
      this.findAllCategories()
  }
};
</script>
<style >
ul>li{
   float: left;
   margin-right: 18px;
   font-family: "黑体";
   font-size: 26px;
   color: rgb(29, 48, 28);
}
.top_r {
    text-align: right;
}
.content {
    text-align: center;
}
.big_nav_bg_l {
    width: 100%;
    background: #276e51;
    height: 2px;
    position: absolute;
    top: 120px;
    left: 0;
    z-index: 9;
    overflow: hidden;
}
.smallt {
    color: #276e51;
    font-family: "微软雅黑";
    font-size: 20px;
    text-align: center;
}
.bottom {
    width: 100%;
}
*{
    list-style: none;
}

</style>